<template>
  <div>

    <dv-full-screen-container class="container">

      <div class="content">

        <dv-border-box-11 title="杭州新兴钢铁">
          <div @click="quit()" class="quit">退出</div>
          <div class="container laoda">
            <div class="box left">
              <dv-border-box-1 class="border-box progress">
                <div style="height:220px">
                  <SanKey/>
                </div>
              </dv-border-box-1>
              <dv-border-box-8 title="核算模型" class="border-box">
                <dv-scroll-board :config="config2" class="charts" style="height:190px" hoverPause/>
              </dv-border-box-8>
              <dv-border-box-8 title="核算报告" class="border-box">
                <dv-scroll-board :config="config3" class="charts" style="height:190px" hoverPause/>
              </dv-border-box-8>
            </div>
            <div class="box center">
              <div class="top">
                <dv-decoration-5 style="width:700px;height:20px;"/>
                <DrilBar class="my-chart"/>


              </div>
              <div class="bottom">
                <div class="son">
                  <dv-border-box-1 class="border-box">
                    <dv-active-ring-chart :config="config10" style="width:250px;height:250px" class="circle"/>
                  </dv-border-box-1>
                </div>
                <div class="son">
                  <dv-border-box-1 class="border-box">
                    <dv-active-ring-chart :config="config11" style="width:250px;height:250px" class="circle"/>
                  </dv-border-box-1>
                </div>
              </div>
            </div>
            <div class="box right">
              <dv-border-box-1 class="border-box">
                <acc style="width:310px;height:310px;" class="charts"></acc>
              </dv-border-box-1>
              <dv-border-box-11 title="单位减排量排行" class="border-box">
                <dv-scroll-ranking-board :config="config9" class="charts title" style="width:280px;height:290px"/>
              </dv-border-box-11>
            </div>
          </div>
        </dv-border-box-11>
      </div>
    </dv-full-screen-container>
  </div>


</template>
<script>
import SanKey from '@/components/Chart/Sankey'
import DrilBar from '@/components/Chart/DrilBar'
import eline from '@/components/enterpriseCarbonAccountingScreen/Line-vue'
import acc from '@/components/enterpriseCarbonAccountingScreen/Accumulate-water.vue'
import {
  config1,
  config2,
  config3,
  config4,
  config5,
  config6,
  config7,
  config8,
  config9,
  config10,
  config11
} from "@/components/enterpriseCarbonAccountingScreen/config"

export default {
  components: {
    acc,
    eline,
    SanKey,
    DrilBar
  },
  name: "screen-vue",
  data: function () {
    return {
      config1,
      config2,
      config3,
      config4,
      config5,
      config6,
      config7,
      config8,
      config9,
      config10,
      config11,
    }
  },
  methods: {
    quit() {
      this.$router.push("/")
    },
  }
}
</script>
<style scoped>
.my-chart {
  width: 700px;
  height: 400px;
  margin-left: 0px;

}

.quit {
  display: fixed;
  font-size: 20px;
  color: #fff;
  white-space: nowrap;
  top: 200px;
  left: 200px;
  z-index: 9999;
}

.container {
  display: flex;
  flex-direction: row;
  background-color: #01132C;
}

.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
}

.left {
  width: 25%;
  height: 35%;
}

.right {
  width: 25%;
  height: 100%;
}

.center {
  width: 50%;
}

.charts {
  width: 90%;
  margin: 5%;
}

.laoda {
  margin: 10vh 2.5vw;
  width: 95vw;
  height: 88vh;
  display: flex;
  flex-direction: row;
  /* background-color: antiquewhite; */
}

.box {
  display: flex;
  flex-direction: column;
}

.title {
  margin-top: 60px;
}

.circle {
  margin-left: 10%;
}

.Fly {
  width: 100%;
  height: 95%;
  margin: 0 4px;
}

.son {
  display: inline-block;
  width: 50%;
  margin-top: 2%;
}

.top {
  height: 60%;
  margin: 0;
}

.bottom {
  height: 40%;
}

.list {
  height: 180px;
}
</style>


